<template>
    <div
        :style="{
            width: '750px',
            height: regionHeight + 'px',
            boxSizing: 'border-box',
            border: '2px #e6e6e6 solid',
        }"
    >
        <div
            class="scrollbar-type-2"
            :style="{
                height: (regionHeight - basisInfoHeight - 4)  + 'px',
                overflow: 'auto',
                background: '#efefef',
            }"
        >
            <div
                class="pos-r"
                ref="tempRegion"
                :style="{
                    width: tempWidth + 'mm',
                    height: tempHeight + 'mm',
                    background: tempBg,
                    margin: '0 100px 100px 0',
                    border: '1px red solid',
                    boxSizing: 'border-box',
                }"
            >
                <div
                    class="pos-a no-select-text"
                    v-for="(item, index) in pageList"
                    :key="index"
                    :style="{
                        width: item.width + 'px',
                        height: item.height + 'px',
                        zIndex: item.zIndex,
                        border: item.border,
                        left: item.left + 'px',
                        top: item.top + 'px',
                        cursor: 'move',
                    }"
                    @mousedown.stop="handleComponentMousedown($event, item, index)"
                >
                    <div
                        :style="{
                            width: '100%',
                            height: '100%',
                            background: item.bg,
                            color: item.color,
                            fontSize: item.fontSize + 'px',
                            textAlign: item.align,
                            overflow: 'hidden',
                        }"
                        
                    >
                        {{ item.content }}
                    </div>
                </div>
            </div>
        </div>

        <div
            class="flex align-center font-14"
            :style="{
                height: basisInfoHeight + 'px',
                background: basisInfoBg,
                borderTop: `1px #e6e6e6 solid`,
                padding: '0 10px',
            }"
        >
            <div class="font-b-800">
                <span>模板名称：</span>
                <span>{{ tempName }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Dot from './dot'
    import { mapState } from 'vuex'

    export default {
        name: 'TempRegion',

        data() {
            return {
                basisInfoHeight: 40, // 基础信息高度（模板区域底部）
                basisInfoBg: '#ffffff', // 基础信息背景色
                startX: 0, // 鼠标按下时的 X 轴坐标
                startY: 0, // 鼠标按下时的 Y 轴坐标
                isMoving: false, // 是否正在移动
                currentRow: null, // 当前选中的模板组件
            }
        },

        methods: {
            // 鼠标按下模板组件时的回调
            handleComponentMousedown(e, item, index) {
                // 记录起始值
                this.startX = e.clientX
                this.startY = e.clientY
                this.currentRow = item
                this.isMoving = true
                this.$store.commit('printTemplate/checkComponentSelected', { item, index })
                document.addEventListener('mousemove', this.handleComponentMousemove)
                document.addEventListener('mouseup', this.handleComponentMouseup)
                e.preventDefault()
            },

            // 鼠标拖拽模板组件时的回调
            handleComponentMousemove(e) {
                if (!this.isMoving) return

                const deltaX = e.clientX - this.startX
                const deltaY = e.clientY - this.startY
                const pageList = JSON.parse(JSON.stringify(this.pageList))
                const tempWidth = this.$refs.tempRegion.offsetWidth
                const tempHeight = this.$refs.tempRegion.offsetHeight

                pageList.forEach(item => {
                    if (item.isSelected) {
                        let newTop = this.currentRow.top + deltaY
                        let newLeft = this.currentRow.left + deltaX

                        item.left = newLeft < 0 ? 0 : (newLeft < tempWidth - item.width ? newLeft : tempWidth - item.width)
                        item.top = newTop < 0 ? 0 : (newTop < tempHeight - item.height ? newTop : tempHeight - item.height)
                    }
                })

                this.$store.commit('printTemplate/changeComponentAttrData', pageList)
                e.preventDefault()
            },

            // 鼠标抬起模板组件时的回调
            handleComponentMouseup() {
                this.startX = null
                this.startY = null
                this.currentRow = null
                this.isMoving = false
                document.removeEventListener('mousemove', this.handleComponentMousemove)
                document.removeEventListener('mouseup', this.handleComponentMouseup)
            },
        },

        props: {
            // 操作区域高度
            operateHeight: {
                type: Number,
                default: 0
            }
        },

        components: {
            Dot,
        },

        computed: {
            ...mapState({
                regionHeight: state => state.printTemplate.regionHeight,
                tempName: state => state.printTemplate.tempName,
                tempWidth: state => state.printTemplate.tempWidth,
                tempHeight: state => state.printTemplate.tempHeight,
                tempBg: state => state.printTemplate.tempBg,
                pageList: state => state.printTemplate.pageList,
            })
        },
    }
</script>
